Robust resursladdning i React: Bemästra felgränser med Hooks

I moderna webbapplikationer är asynkron laddning av resurser en vanlig praxis. Oavsett om det handlar om att hämta data från ett API, ladda bilder eller importera moduler, är det avgörande för en smidig användarupplevelse att hantera potentiella fel under resursladdningen. Reacts felgränser (Error Boundaries) erbjuder en mekanism för att fånga JavaScript-fel var som helst i deras underordnade komponentträd, logga dessa fel och visa ett fallback-gränssnitt istället för att hela applikationen kraschar. Den här artikeln utforskar hur man effektivt använder felgränser i kombination med React Hooks för att hantera resursladdningsfel.

Förståelse för felgränser (Error Boundaries)

Före React 16 kunde ohanterade JavaScript-fel under komponentrendering korrumpera Reacts interna tillstånd och orsaka kryptiska fel vid efterföljande renderingar. Felgränser löser detta genom att fungera som "catch-all"-block för fel som inträffar i deras barnkomponenter. De är React-komponenter som implementerar antingen den ena eller båda av följande livscykelmetoder:

• static getDerivedStateFromError(error): Denna statiska metod anropas efter att ett fel har kastats av en underordnad komponent. Den tar emot felet som kastades som ett argument och returnerar ett värde för att uppdatera komponentens tillstånd.
• componentDidCatch(error, info): Denna livscykelmetod anropas efter att ett fel har kastats av en underordnad komponent. Den tar emot felet som kastades som ett argument, samt ett objekt med information om vilken komponent som kastade felet. Du kan använda den för att logga felinformation.

Viktigt att notera är att felgränser endast fångar fel i renderingsfasen, i livscykelmetoder och i konstruktorer för hela trädet under dem. De fångar inte fel för:

• Händelsehanterare (läs mer i avsnittet nedan)
• Asynkron kod (t.ex. setTimeout- eller requestAnimationFrame-callbacks)
• Rendering på serversidan (Server-side rendering)
• Fel som kastas i själva felgränsen (snarare än i dess barn)

Felgränser och React Hooks: En kraftfull kombination

Medan klasskomponenter traditionellt användes för att implementera felgränser, erbjuder React Hooks ett mer koncist och funktionellt tillvägagångssätt. Vi kan skapa en återanvändbar useErrorBoundary-hook som kapslar in felhanteringslogiken och erbjuder ett bekvämt sätt att slå in komponenter som kan kasta fel under resursladdning.

Skapa en anpassad useErrorBoundary-hook

Här är ett exempel på en useErrorBoundary-hook:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Förklaring:

• useState: Vi använder useState för att hantera feltillståndet. Det sätter initialt felet till null.
• useCallback: Vi använder useCallback för att memorera funktionerna resetError och captureError. Detta är god praxis för att förhindra onödiga omrenderingar om dessa funktioner skickas ner som props.
• ErrorBoundary-komponent: Detta är en funktionell komponent skapad med useCallback som tar emot children och en valfri fallback-prop. Om ett fel finns i tillståndet renderar den antingen den angivna fallback-komponenten eller ett standardfelmeddelande. Annars renderar den sina barn (children). Denna fungerar som vår felgräns. Beroendearrayen `[error]` säkerställer att den omrenderas när `error`-tillståndet ändras.
• captureError-funktion: Denna funktion används för att sätta feltillståndet. Du kommer att anropa denna inuti ett try...catch-block när du laddar resurser.
• resetError-funktion: Denna funktion rensar feltillståndet, vilket gör att komponenten kan omrendera sina barn (och potentiellt försöka ladda resursen igen).

Implementera resursladdning med felhantering

Nu ska vi se hur man använder denna hook för att hantera resursladdningsfel. Tänk dig en komponent som hämtar användardata från ett API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry